<template>
    <div>
        <div class="ls_maincont"></div>
        <div class="mainDiv fpl_c">
            <div class="r">
                <div class="stage_c_r main_3 fpl_item">
                    <div class="t">
                        <div class="react">
                            <i class="l_up"></i>
                            <i class="l_down"></i>
                            <i class="r_up"></i>
                            <i class="r_down"></i>
                            <div class="title">
                                <span style="color: white; font-size: 30px;">A层煤粉分配率(%)</span>
                            </div>
                        </div>
                    </div>
                    <div class="d d2 zhu">
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[0] + '%' }" ></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">A1 </div>
                            <div style="color: white;">{{list[0]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[1] + '%' }" ></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">A2</div>
                            <div style="color: white;">{{list[1]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[2] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">A3</div>
                            <div style="color: white;">{{list[2]}}%</div>

                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[3] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">A4</div>
                            <div style="color: white;">{{list[3]}}%</div>
                        </div>
                    </div>
                </div>
                <div class="stage_c_r main_3 fpl_item">
                    <div class="t">
                        <div class="react">
                            <i class="l_up"></i>
                            <i class="l_down"></i>
                            <i class="r_up"></i>
                            <i class="r_down"></i>
                            <div class="title">
                                <span style="color: white; font-size: 30px;">B层煤粉分配率(%)</span>
                            </div>
                        </div>
                    </div>
                    <div class="d d2 zhu">
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[4] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">B1</div>
                            <div style="color: white;">{{list[4]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[5] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">B2</div>
                            <div style="color: white;">{{list[5]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[6] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">B3</div>
                            <div style="color: white;">{{list[6]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[7] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">B4</div>
                            <div style="color: white;">{{list[7]}}%</div>
                        </div>
                    </div>
                </div>




            </div>
            <div class="r">
                <div class="stage_c_r main_3 fpl_item">
                    <div class="t">
                        <div class="react">
                            <i class="l_up"></i>
                            <i class="l_down"></i>
                            <i class="r_up"></i>
                            <i class="r_down"></i>
                            <div class="title">
                                <span style="color: white; font-size: 30px;">C层煤粉分配率(%)</span>

                            </div>
                        </div>
                    </div>
                    <div class="d d2 zhu">
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[8] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">C1</div>
                            <div style="color: white;">{{list[8]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[9] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">C2</div>
                            <div style="color: white;">{{list[9]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[10] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">C3</div>
                            <div style="color: white;">{{list[10]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[11] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">C4</div>
                            <div style="color: white;">{{list[11]}}%</div>
                        </div>
                    </div>
                </div>

                <div class="stage_c_r main_3 fpl_item">
                    <div class="t">
                        <div class="react">
                            <i class="l_up"></i>
                            <i class="l_down"></i>
                            <i class="r_up"></i>
                            <i class="r_down"></i>
                            <div class="title">
                                <span style="color: white; font-size: 30px;">D层煤粉分配率(%)</span>
                            </div>
                        </div>
                    </div>
                    <div class="d d2 zhu">
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[12] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">D1</div>
                            <div style="color: white;">{{list[12]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[13] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">D2</div>
                            <div style="color: white;">{{list[13]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[14] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">D3</div>
                            <div style="color: white;">{{list[14]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[15] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">D4</div>
                            <div style="color: white;">{{list[15]}}%</div>
                        </div>
                    </div>
                </div>
                <div class="stage_c_r main_3 fpl_item">
                    <div class="t">
                        <div class="react">
                            <i class="l_up"></i>
                            <i class="l_down"></i>
                            <i class="r_up"></i>
                            <i class="r_down"></i>
                            <div class="title">
                                <span style="color: white; font-size: 30px;">E层煤粉分配率(%)</span>
                            </div>
                        </div>
                    </div>
                    <div class="d d2 zhu">
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[16] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">E1</div>
                            <div style="color: white;">{{list[16]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[17] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">E2</div>
                            <div style="color: white;">{{list[17]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[18] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">E3</div>
                            <div style="color: white;">{{list[18]}}%</div>
                        </div>
                        <div class="zhu_c">
                            <div class="zhu_top">
                                <div class="wendutiao_react nomal" :style="{ height: list[19] + '%' }"></div>
                                <div class="wendutiao_text">
                                    <span style="color: white;">100</span>
                                    <span style="color: white;">75</span>
                                    <span style="color: white;">50</span>
                                    <span style="color: white;">25</span>
                                    <span style="color: white;">0</span>
                                </div>
                            </div>
                            <div class="zhu_down" style="color: white;">E4</div>
                            <div style="color: white;">{{list[19]}}%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="stage_t">
            <div class="stage_t_left">
                <img src="../assets/logins.jpg" alt=""> <span>国能怀安热电有限公司</span>
            </div>
            <div class="stage_t_zhong">燃烧数字化监测与可视化系统</div>
            <div class="stage_t_right">
                <img src="../assets/timer.png" alt=""> <span>{{ nowTime }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { formatTime } from "../utils/date.js";
const nowTime = ref("");
import { postmeifenapi } from "../api/meifen.js";
onMounted(() => {
    setInterval(() => {
        nowTime.value = formatTime(new Date());
    });
    // 调用
    tuxing();
});
let list=ref([]);
let timer = 0
let tuxing = async () => {
    clearTimeout(timer)
    list.value = []  // ��空数据
    const res = await postmeifenapi();
    res.data.index0.map(item=>{
      list.value.push(item)
    })
    timer = setInterval(() => {
    tuxing();
    },5000)
};



</script>

<style lang="scss" scoped></style>